<template>
    <div class="white-module module">

      <div class="title"><span></span>赛事报名</div>
      <div class="info">
        <div class="item">
         <div class="o"> <span>赛事</span>{{matchInfo.match_name}}</div><span class="last">比赛时间</span>{{matchInfo.matchdate}}
        </div>
        <div class="item">
          <div class="o">  <span>领队</span>{{teaminfo.real_name}}</div>
          <span class="last">报名时间</span>{{matchInfo.signdate}}
        </div>
      </div>
      <div class="title" v-if="matchInfo.promiss_file"><span></span>承诺书</div>
      <div class="info" v-if="matchInfo.promiss_file">
        <div class="item">
          <div class="o"><span style="margin-left: -20px;"></span>
            <el-upload
                class="avatar-uploader"
                :action="baseUrl+'/front/upload'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload" ref="refPromissFile">
              <div class="image" style="width: 100px; height: 60px;">
                <img v-if="teamAttach.promissFile" :src="previewImg(teamAttach.promissFile)" style="width: 80px;" @click.stop="showImg(teamAttach.promissFile)"/>
                <div v-else class="upload">
                  <img src="@/assets/common/upload.png">
                </div>
                <div v-if="matchInfo.needPromissFile == '1'" class="confirm">重新上传</div>
              </div>
            </el-upload>
            <a href="javascript:void(0)" @click.stop="downLoadFile(matchInfo.promiss_file)">下载承诺书模板</a>
          </div>
        </div>
      </div>

      <div class="title"><span></span>赛项选择</div>
      <div class="c" >
        <div class ="matchType" v-for="(itemMatch,index) in matchTypeList" :key="index">
          <div>
            {{itemMatch.name}}:
          </div>
          <div class="c">
            <div class="item" v-for="(item) in itemMatch.items">
              <div class="title">{{item.item_name}}</div>
              <div class="btn" v-if="matchInfo.canSignFlag" @click="handleEnroll(item.item_type==100201?1:2,item.id)">赛事报名</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

<script lang="ts" >
import app from "@/constants/app";
import {defineComponent, reactive, ref, toRefs} from "vue";
import router from "@/router";
import listService from "@/utils/listService";
import baseService from "@/utils/baseService";
import {getCache, getToken} from "@/utils/cache";
import {ElMessage} from "element-plus";


export default defineComponent({
  setup() {
    const refPromissFile = ref()
    const state = reactive({
      getDataListURL: "/front/fast/match/match/page?pageSize=10&name=小鸟飞飞",
      getDataListIsPage: true,
      deleteURL: "/pay/order",
      deleteIsBatch: true,
      dataForm: {
        orderId: "",
        status: "",
        name: ""
      },
      teamAttach: {
        id: null as any,
        matchId: null,
        teamId: null,
        promissFile: ""
      },
      baseUrl: app.api,
      teamId: null as any,
    });
    return {...listService(state), ...toRefs(state), refPromissFile};
  },
  mounted(){
    this.id=this.$route.query.id;
    this.enrollFlag = this.$route.query.enrollFlag;
    this.queryInfo();
    const teamId =getCache("CacheToken",{ isSessionStorage: true }, {})["teamId"];
    this.teamId = teamId;
    this.queryTeamInfo(teamId);
    this.queryPromissFile();
  },

  data() {
    return {
      enrollFlag: "0" as any, //0不可报名 1可以报名
      id : null as any,
      isCollapse:1,
      teaminfo:{
        real_name: "",
        team_name: ""
      },
      matchInfo:{
        match_name:'',
        signdate:'',
        begindate:'',
        detail:[{classname:''}],
        matchdate: '',
        canSignFlag: false
      },//赛事分类
      matchTypeList:[] as any,
      dialogVisible:false,
      isNavCollapse:false,
      showDialogFlag: false,
      evaluationDialogFlag: false,
      updateForm: {
        id: '',
        schoolName: '',
        evaluation: ''
      },
      formLabelWidth: '120px',
    };
  },

  methods: {
    handleEnroll(index: number,id:string) {
      if (index == 1) {
        //个人报名
        router.push("/enroll/individualEnroll?id="+id+"&matchId="+this.id);
      } else {
        //团体报名
        router.push("/enroll/groupEnroll?id="+id+"&matchId="+this.id);
      }
    },
    queryInfo() {
      const userInfo = getCache("userInfo", {isSessionStorage: true}, {});
      if (!(userInfo && userInfo.team)) {
        return;
      }
      //baseService.get('/front/fast/match/matchInfo/info?id=' + this.id + '&city=' + userInfo.team.city).then(e => {
      baseService.get('/front/spmatch/matchItem?matchId=' + this.id +'&teamId=' + userInfo.team.id + '&city=' + userInfo.team.city).then(e => {
        this.matchInfo = e.data;
        let matchTypeList = [];
        let itemClass = '';
        let currentClass: any = null;
        this.matchInfo.detail.forEach((e) => {
          if (e.classname !== itemClass) {
            if (currentClass) {
              matchTypeList.push(currentClass);
            }
            itemClass = e.classname;
            currentClass = {name: itemClass, items: []};
          }
          currentClass.items.push(e);
        })
        matchTypeList.push(currentClass);
        this.matchTypeList = matchTypeList;
      })
    }
    //查询赛项信息
    ,queryTeamInfo(id:string){
      baseService.get("/front/fast/user/team/info?id="+id).then((e:any)=>{
        if(e.code=='0'){
          this.teaminfo = e.data;
        }
      });
    },

    //查询承诺书
    queryPromissFile() {
      baseService.get("/front/spteamattach/info?teamId=" + this.teamId + "&matchId=" + this.id).then((res: any) => {
        if (res.code == 0) {
          this.teamAttach = res.data;
        }
      });
    },

    //保存承诺书
    savePromissFile() {
      baseService.get("/front/spteamattach/save", {
        teamId: this.teamId,
        matchId: this.id,
        promissFile: this.teamAttach.promissFile
      }).then((e: any) => {
        if (e.code == '0') {
          this.teamAttach.id = '-1';
          ElMessage.success("保存成功");
        }
      });
    },

    //上传承诺书成功
    handleAvatarSuccess(res: any, file: any, fileList: any, type: string) {
      this.teamAttach.promissFile = res.data.src;
      this.savePromissFile();
    },

    //上传之前
    beforeAvatarUpload(file: any) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (file.type !== "image/jpg" && file.type !== "image/jpeg" && file.type !== "image/png" && file.type !== "image/gif" && file.type !== 'application/pdf') {
        ElMessage.error('只支持jpg、png、gif、pdf格式的图片!')
        return false;
      }
      if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 5MB!')
      }
      return isLt2M;
    },

    showImg(url: string) {
      window.open(url);
    },

    downLoadFile(url: string){
      let a = document.createElement('a');
      let evt = document.createEvent('MouseEvents');
      a.download = '参赛承诺书';
      a.href = app.api+"/front/download?imageUrl="+ url +"&fileName=" + this.matchInfo.match_name + "-参赛承诺书.docx";
      evt.initEvent('click',true,true);
      a.dispatchEvent(evt);
      window.URL.revokeObjectURL(a.href);
    },

    //预览图片
    previewImg(url: string) {
      if (url && url.toLowerCase().includes(".pdf")) {
        return "http://img.fii-cc.com/fii/20230604/b2f13f0061e14463b63683f3998f055a.jpg";
      }else{
        return url;
      }
    }





  }
});
</script>

<style lang="scss" scoped>
.module {
    padding: 20px 0px 50px;
    margin-bottom: 12px;
    position: relative;

    .title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: $font-weight-bold;
        padding: 0px 24px;

        span {
            width: 4px;
            height: 12px;
            background: #00a0e9;
            margin-right: 7px;
        }
    }


    .info {
        margin-bottom: 34px;

        .item {
            display: flex;
            align-items: center;
            margin-top: 14px;
            color: #4f5a70;

            .o {
                width: 400px;
                display: flex;
            }

            span {
                width: 78px;
                margin-left: 35px;
                text-align: right;
                margin-right: 20px;
            }
        }
        .confirm {
          width: 98px;
          text-align: center;
          line-height: 32px;
          background: #FFFFFF;
          border-radius: 6px;
          color: #00A0E9;
          border: 1px solid rgba(0, 160, 233, 0.28);
          margin: auto;
          cursor: pointer;
          margin-left: -10px;
        }
        .confirm:hover {
          background: $color-primary;
          color: #FFFFFF;
        }
    }

    .c {
        display: flex;
        flex-wrap: wrap;
        //justify-content: space-between;
        padding: 0px 20px;
        margin-top: 16px;
        width: 1070px;

        .item {
            width: 24%;
            margin-bottom: 16px;
            height: 118px;
            background: #F5F7FA;
            border-radius: 8px;
            text-align: center;
            margin-right: 20px;
            .title {
                font-size: 16px;
                font-weight: $font-weight-bold;
                padding: 20px 0px 24px;
                text-align: center;
                justify-content: center;
            }

            .btn {
                width: 98px;
                text-align: center;
                line-height: 32px;
                background: #FFFFFF;
                border-radius: 6px;
                color: $color-primary;
                border: 1px solid rgba(0, 160, 233, 0.28);
                margin: auto;
                cursor: pointer;
            }

            .btn:hover {
                background: $color-primary;
                color: #FFFFFF;
            }
        }
    }

}
</style>
